<template>
  <div>
    <div 
      class="box"
        v-if="productList.length > 0"
        v-for="(item,index) in productList"
        :key="index"
      >
      <router-link to="/">
        <img :src="item.bloggerPic" alt="">
      </router-link>
      <span>{{ item.bloggerName }}</span>
      <div class="concern">关注ta</div>
      <router-link to="/">
        <div class="pic-box">
          <img :src="item.bloggerArticles[0].articlePic" alt="">
          <img :src="item.bloggerArticles[1].articlePic" alt="">
        </div>
      </router-link>
      
    </div>
    <div v-else>数据正在加载中...</div>
  </div>
</template>

<script>
export default {
  name:"User",
   data(){
    return{
      productList:[]
    }
  },
  mounted() {
    this.$axios.get("http://localhost:3000/api/bloggerInfo?count=5",{
      
    })
    .then(res => {
      this.productList = res.data
      
    })
    .catch(error => {
      console.log(error);
    })
  },
}
</script>

<style scoped>
  .box{
    width: 9.466rem;
    height: 6.56rem;
    background-color: #ffffff;
    border-radius: 0.134rem;
    margin-left: 0.267rem;
    margin-top: 0.853rem;
    box-shadow: 0.053rem -0.053rem 0.4rem rgba(0,0,0,0.1);
    padding-bottom: 0.267rem;
  }
.box img{
  width: 1.23rem;
  height: 1.23rem;
  margin-top: -0.267rem;
  margin-left: 0.213rem;
  float: left;
}
span{
  display: block;
  margin-top: 0.4rem;
  float: left;
  margin-left: 0.456rem;
  color: #808080;
  font-size: 0.373rem;
}
.concern{
  float: right;
  width: 1.25rem;
  height: 0.453rem;
  border: 0.026rem solid #808080;
  border-radius: 0.25rem;
  padding: 0 0.056rem;
  padding-top: 0.08rem;
  text-align: center;
  margin-right: 0.4rem;
  margin-top: 0.346rem;
  font-size: 0.24rem;
  color: #808080;
}
.pic-box{
  float: left;
  margin-top: 0.93rem;
  margin-left: 0.267rem;
}
.pic-box img{
  width: 4.18rem;
  height: 4.72rem;
  float: left;
  
}
</style>
